<template>
  <div>
    <ul class="list">
      <li v-for="(v, i) in list" :key="i" class="list_item">
        <img :src="v.imgurl" />
        <p>{{ v.title }}</p>
      </li>
    </ul>
    <ul class="menu_list" style="background: transparent">
      <li
        class="menu_list"
        @click="(comm = 'Road'), (bool = true)"
        :class="bool ? 'current' : ''"
      >
        经典线路玩法
      </li>
      <li
        class="menu_list"
        @click="(comm = 'Hot'), (bool = false)"
        :class="bool ? '' : 'current'"
      >
        打卡热门景点
      </li>
    </ul>
    <component :is="comm"></component>
    <div class="showmore">查看更多景点>></div>
  </div>
</template>

<script>
import Road from "./road.vue";
import Hot from "./hot.vue";
export default {
  data() {
    return {
      list: [
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/0300b1200086twduqD1E2.png_.webp",
          title: "景点.门票",
        },
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/0300w1200086twaz4E813.png_.webp",
          title: "一日游",
        },
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/0301i1200086twimfF098.png_.webp",
          title: "酒店",
        },
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/0300c1200086twduy6C48.png_.webp",
          title: "周边跟团",
        },
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/030471200086twbf07353.png_.webp",
          title: "自驾游",
        },
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/0305o1200086qs20f7A85.png_.webp",
          title: "徒步登山",
        },
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/0303m1200084n6k5z3225.png_.webp",
          title: "游艇帆船",
        },
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/03044120008pepo92C54E.png_.webp",
          title: "露营",
        },
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/030131200086qrw8k1CDD.png_.webp",
          title: "亲自出游",
        },
        {
          imgurl:
            "https://dimg04.c-ctrip.com/images/0304j1200085hsb5w05AC.png_.webp",
          title: "旅行跟拍",
        },
      ],
      comm: "Road",
      bool: true,
    };
  },
  components: {
    Road,
    Hot,
  },
};
</script>

<style scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 0.05rem;
  font-size: 12px;
  justify-content: space-evenly;
  margin-bottom: 0.15rem;
}
.list_item {
  width: calc(100% - 0.1rem) / 5;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  text-align: center;
}
.list_item img {
  width: 0.62rem;
}
.menu_list {
  display: flex;
  padding: 0 .12rem;
  align-items: center;
  justify-content: space-around;
  font-size: 0.16rem;
  font-weight: 700;
}
.menu_item {
  position: relative;
}
.current {
  color: #19a0f0;
  position: relative;
}
.current::before {
  content: "";
  position: absolute;
  height: 0.03rem;
  width: 1rem;
  background: #19a0f0;
  top: 0.3rem;
}
.showmore{
  color: rgb(0, 134, 246);
  font-size: .18rem;
  text-align: center;
}
</style>